<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>地图主体</title>
    <link href="ol/openlayers.css" rel="stylesheet" type="text/css" />
    <link href="css/indexstyle.css" rel="stylesheet" type="text/css" />
    <script src="ol/openlayers.js" type="text/javascript"></script>
    <script src="vue/axios.min.js"></script>
    <script src="vue/vue.js"></script>
    <script src="js/jquery-3.5.0.min.js" type="text/javascript"></script>
    <script src="js/function.js" type="text/javascript"></script>
    <script
        src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL">
    </script>
    <script src="js/kriging.js"></script>
    <script src="js/data.js"></script>
</head>

<body>
    <div id="mapCon">
        <div id="showMeTime" class="showMeTime">2020-6-3 6:00</div>
        <!-- Popup -->
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content">
            </div>
        </div>
    </div>
    <form>
    </form>
    <script type="text/javascript">
        //实例化热力图层
        // var heatMapVector = new ol.layer.Heatmap({});
        /**
         * 实例化Map对象加载地图,默认底图加载天地图
         */
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=6b0358e884633f5fe833696a908e66c4", //parent.TiandituKey()为天地图密钥
                        wrapX: false
                    })
                }),
                new ol.layer.Tile({
                    title: "天地图矢量注记图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=6b0358e884633f5fe833696a908e66c4", //parent.TiandituKey()为天地图密钥
                        wrapX: false
                    })
                }),
                // heatMapVector
            ],
            target: 'mapCon',
            view: new ol.View({
                center: [13380948, 3538728],
                zoom: 12,
                // projection: 'EPSG:4326'
            })
        });
        /**
         * 创建矢量标注样式函数,设置image为图标ol.style.Icon
         * @param {ol.Feature} feature 要素
         */


        var styles = new ol.style.Style({
            image: new ol.style.Icon(
                ({
                    anchor: [0.5, 0.5],
                    anchorOrigin: 'top-right',
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    offsetOrigin: 'top-right',
                    // offset:[0,10],
                    //图标缩放比例
                    scale: 0.1,
                    //透明度
                    opacity: 0.75,
                    //图标的url
                    src: 'img/ditie.svg'
                })),
            text: new ol.style.Text({
                offsetY: 25,
                //位置
                textAlign: 'center',
                //基准线
                textBaseline: 'middle',
                //文字样式
                font: 'normal 10px 微软雅黑 blod',
                //文本内容
                // text: feature.get('name'),
                //文本填充样式（即文字颜色）
                fill: new ol.style.Fill({
                    color: 'black'
                }),
                stroke: new ol.style.Stroke({
                    color: 'gray',
                    width: 0.7
                }),
            })
        });
        //实例化矢量数据源，用ol.format.GeoJSON类解析数据
        var myUrl =
            'http://47.102.159.159:2151/geoserver/metro/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=metro%3Ametrostation&maxFeatures=200&outputFormat=application%2Fjson';

        ajaxLoadMetroPoint(myUrl);
        /**
         * 实现popup的html元素
         */
        var container = document.getElementById('popup');
        var content = document.getElementById('popup-content');
        var closer = document.getElementById('popup-closer');

        /**
         * 在地图容器中创建一个Overlay
         */
        var popup = new ol.Overlay({
            //要转换成overlay的HTML元素
            element: container,
            //当前窗口可见
            autoPan: true,
            //Popup放置的位置
            positioning: 'bottom-center',
            //是否应该停止事件传播到地图窗口
            stopEvent: false,
            autoPanAnimation: {
                //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
                duration: 250
            }
        });
        map.addOverlay(popup);
        //实例化热力图数据源数组，调用函数
        var addressArr = ['test11.geojson', 'test12.geojson', 'test13.geojson', 'test14.geojson', 'test11.geojson',
            'test12.geojson', 'test13.geojson', 'test14.geojson', 'test11.geojson', 'test12.geojson',
            'test13.geojson', 'test14.geojson', 'test11.geojson', 'test12.geojson', 'test13.geojson',
            'test14.geojson', 'test11.geojson'
        ];
        //17个小时
        // timingChangeHeatMap();
        testUrl = 'http://47.102.159.159:5588/HeatMap/Get/7';
        var start = Date.now()
        // ajaxLoadkriging(testUrl)
        /**
         * 添加关闭按钮的单击事件（隐藏popup）
         * @return {boolean} Don't follow the href.
         */
        closer.onclick = function () {
            //未定义popup位置
            popup.setPosition(undefined);
            //失去焦点
            closer.blur();
            return false;
        };
        /**
         * 为map添加点击事件监听，渲染弹出popup
         */
        map.on('click', function (evt) {
            //判断当前单击处是否有要素，捕获到要素时弹出popup
            var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
                return feature;
            });
            // console.log(feature)
            var PeopleFlowDate = '';
            if (feature) {
                //清空popup的内容容器
                content.innerHTML = '';
                //获取并实例化信息
                var featuerInfo = getInfomationOfPoi(feature.values_.heat, feature.values_.line,
                    feature.values_.name);
                // console.log(featuerInfo.att.title);
                //在popup中加载当前要素的具体信息
                addFeatrueInfo(featuerInfo);
                //设置popup的位置
                var popupPosition = feature.values_.geometry.flatCoordinates;
                popupPosition = [feature.values_.geometry.flatCoordinates[0], feature.values_.geometry
                    .flatCoordinates[1] - 500
                ]
                // console.log(popupPosition)
                popup.setPosition(popupPosition);
            }
        });
        /**
         * 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
         */
        map.on('pointermove', function (e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTargetElement().style.cursor = hit ? 'pointer' : '';
        });
    </script>
</body>

</html>